<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                @if (h5pActivity) {
                    <core-format-text [text]="h5pActivity.name" contextLevel="module" [contextInstanceId]="h5pActivity.coursemodule"
                        [courseId]="courseId" />
                }
            </h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <core-loading [hideUntil]="loaded">
        <h2 class="ion-margin">
            @if (user && isCurrentUser) {
                {{ 'addon.mod_h5pactivity.myattempts' | translate }}
            } @else {
                {{ 'addon.mod_h5pactivity.attempts' | translate }}
            }
        </h2>

        <!-- User viewed. -->
        @if (user && !isCurrentUser) {
            <ion-card class="addon-mod_h5pactivity-user-card">
                <ion-item core-user-link [userId]="user.id" [courseId]="courseId" button [detail]="true">
                    <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false" />
                    <ion-label>{{ user.fullname }}</ion-label>
                </ion-item>
            </ion-card>
        }

        @if (attemptsData) {

            <!-- Attempts used to calculate the score. -->
            @if (attemptsData.scored) {
                <ng-container *ngTemplateOutlet="attemptsTemplate; context: {
                    title: attemptsData.scored.title,
                    attempts: attemptsData.scored.attempts,
                    type: 'scored'
                }" />
            }

            <!-- All attempts. -->
            @if (attemptsData.attempts && attemptsData.attempts.length) {
                <ng-container *ngTemplateOutlet="attemptsTemplate; context: {
                    title: allAttemptsTitle,
                    attempts: attemptsData.attempts,
                    type: 'all'
                }" />
            }
        }

        <!-- No attempts. -->
        @if (attemptsData && (!attemptsData.attempts || !attemptsData.attempts.length)) {
            <core-empty-box icon="fas-chart-bar" [message]="'addon.mod_h5pactivity.attempts_none' | translate" />
        }
    </core-loading>
</ion-content>

<ng-template #attemptsTemplate let-title="title" let-attempts="attempts" let-type="type">
    @if (isTablet()) {
        <ng-container *ngTemplateOutlet="attemptsGridTemplate; context: { title, attempts, type }" />
    } @else {
        <ng-container *ngTemplateOutlet="attemptsCardTemplate; context: { title, attempts, type }" />
    }
</ng-template>


<ng-template #attemptsCardTemplate let-title="title" let-attempts="attempts" let-type="type">
    <ion-card class="addon-mod_h5pactivity-attempts-card">
        <ion-card-header>
            <ion-card-title aria-level="3">{{title}}</ion-card-title>
        </ion-card-header>

        <ion-card-content role="list" class="ion-no-padding">
            <ion-accordion-group [value]="expandedAttemptId" (ionChange)="onAttemptAccordionGroupChanged($event)">
                @for (attempt of attempts; track attempt.attempt) {
                    <ng-container *ngTemplateOutlet="attemptItemTemplate; context: {
                        attempt,
                        id: 'addon-mod-h5pactivity-user-attempts-' + type + '-' + attempt.attempt
                    }" />
                }
            </ion-accordion-group>
        </ion-card-content>
    </ion-card>
</ng-template>

<ng-template #attemptItemTemplate let-attempt="attempt" let-id="id">
    <ion-accordion role="item" [value]="id" toggle-icon-slot="start" class="addon-mod_h5pactivity-attempts-item">
        <ion-item slot="header">
            <h4>
                {{ 'addon.mod_h5pactivity.attempt' | translate }} {{ attempt.attempt }}
            </h4>
            <div slot="end" [attr.aria-hidden]="expandedAttemptId === id">
                @if (attempt.success !== null) {
                    <addon-mod-h5pactivity-attempt-success [attempt]="attempt" />
                }
                <span>{{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: attempt} }}</span>
            </div>
        </ion-item>
        <div slot="content">
            <addon-mod-h5pactivity-attempt-summary [attempt]="attempt" />
            <ion-button fill="outline" expand="block" (click)="openAttempt(attempt)">
                <ion-icon slot="icon-only" name="fas-search" aria-hidden="true" />
                {{ 'addon.mod_h5pactivity.view_report' | translate }}
            </ion-button>
        </div>
    </ion-accordion>
</ng-template>

<ng-template #attemptsGridTemplate let-title="title" let-attempts="attempts">
    <h3 class="ion-padding ion-no-margin ion-margin-top">{{ title }}</h3>

    <ion-grid role="grid" class="addon-mod_h5pactivity-attempts-grid">

        <!-- Header of the table -->
        <ion-row role="row">
            <ion-col role="columnheader" size="1">#</ion-col>
            <ion-col role="columnheader" size="3">{{ 'addon.mod_h5pactivity.startdate' | translate }}</ion-col>
            <ion-col role="columnheader" class="ion-text-center">{{ 'addon.mod_h5pactivity.score' | translate }}</ion-col>
            <ion-col role="columnheader" class="ion-text-center">{{ 'addon.mod_h5pactivity.duration' | translate }}</ion-col>
            <ion-col role="columnheader" class="ion-text-center">{{ 'addon.mod_h5pactivity.completion' | translate }}</ion-col>
            <ion-col role="columnheader" class="ion-text-center">{{ 'addon.mod_h5pactivity.outcome' | translate }}</ion-col>
            <ion-col role="columnheader" size="auto">
                <!-- Placeholder -->
                <ion-icon name="fas-chevron-right" aria-hidden="true" class="invisible" />
            </ion-col>
        </ion-row>

        <!-- List of attempts -->
        @for (attempt of attempts; track attempt.attempt) {
            <ion-row role="row" tappable (click)="openAttempt(attempt)" class="ion-activatable ripple-parent">
                <ion-col role="gridcell" size="1">
                    {{ attempt.attempt }}
                </ion-col>
                <ion-col role="gridcell" size="3">
                    {{ attempt.timemodified | coreFormatDate:'strftimedatetimeshort' }}
                </ion-col>
                <ion-col role="gridcell" class="ion-justify-content-center ion-text-center">
                    {{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: attempt} }}
                </ion-col>
                <ion-col role="gridcell" class="ion-justify-content-center ion-text-center">
                    {{ attempt.durationReadable }}
                </ion-col>
                <ion-col role="gridcell" class="ion-justify-content-center ion-text-center">
                    <addon-mod-h5pactivity-attempt-completion [attempt]="attempt" />
                </ion-col>
                <ion-col role="gridcell" class="ion-justify-content-center ion-text-center">
                    <addon-mod-h5pactivity-attempt-success [attempt]="attempt" />
                </ion-col>
                <ion-col role="gridcell" size="auto">
                    <span (ariaButtonClick)="openAttempt(attempt)">
                        <ion-icon name="fas-chevron-right" [attr.aria-label]="'addon.mod_h5pactivity.view_report' | translate" />
                    </span>
                </ion-col>
                <ion-ripple-effect />
            </ion-row>
        }

    </ion-grid>
</ng-template>
